<template>
  <view class="MyInput" @click="handleClick">
    <view class="left">
      <i class="iconfont" :class="icon"></i>
      <view class="text">{{ title }}</view>
    </view>
    <view class="right">
      <view class="box">
        <input :value="value" @input="handleChange" :maxlength="MaxLength"
          :style="{ textAlign: direction ? 'left' : 'right' }" :disabled="disabled" :type="type" class="uni-input"
          :placeholder="placeholder" />
      </view>
      <i v-if="arrow" class="iconfont icon-jiantouyou"></i>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
// 通过泛型参数来定义 props 的类型
const props = defineProps<{
  // icon图标
  icon: string
  // 标题
  title: string
  // 输入框提示语
  placeholder: string
  // 是否禁用
  disabled?: boolean
  // 输入的文本是否向右对齐
  direction?: boolean,
  // 是否显示箭头
  arrow?: string,
  // input类型（默认text）
  type?: string,
  // 最大值输入长度
  max?: string,
  // 输入框的值
  value?: string
}>()
// 格式化最大值输入长度
const MaxLength = computed(() => {
  return !props.max ? -1 : props.max
})

const emit = defineEmits(['change', 'click'])

// 输入框值改变
const handleChange = (event: any) => {
  // console.log('sdksjdlskd:', event.target.value)
  emit('change', event.target.value);
  // return event.target.values
}
// 点击事件
const handleClick = () => {
  emit('click')
}

</script>

<style lang="scss" scoped>
.MyInput {
  padding: 20rpx 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 28rpx;

  .left {
    display: flex;
    align-items: center;

    .iconfont {
      font-size: 28rpx;
    }

    .text {
      margin-left: 10rpx;
    }
  }

  .right {
    // width: 500rpx;
    flex: 1;
    margin-left: 40rpx;
    display: flex;
    align-items: center;

    .box {
      flex: 1;

      .uni-input {
        text-align: right;
        // width: 500rpx;
      }
    }


    .iconfont {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24rpx;
      color: #808080;
      margin-left: 7rpx;
    }
  }
}
</style>